<script setup>
import { ref } from "vue";
import { useMessage } from "naive-ui";

// 消息对象
const message = useMessage();

// 自定义的属性
defineProps(["title", "originalName"]);

// 自定义的事件
const emits = defineEmits(["rename"]);

// 是否显示重命名对话框
const show = ref(false);

// 修改名字表单的数据
const renameFormValue = ref({
    name: "", // 修改后名字
});

// 修改名字表单的验证规则
const renameFormRules = {
    name: {
        required: true,
        message: "请输入重命名文件名称",
        trigger: "input",
    },
};

// 验证表单实例对象
const renameFormRef = ref(null);

// 重命名
const toRename = () => {
    renameFormRef.value?.validate((errors) => {
        if (!errors) {
            show.value = false; // 关闭重命名窗口
            // 通知父组件 -- 发送重命名请求
            emits("rename", renameFormValue.value.name);
        }
    });
};

/**
 * 改变重命名窗口显示状态
 * @param {Boolean} isSHow 是否显示
 */
const changeShowValue = (isSHow) => {
    show.value = isSHow;
};

defineExpose({ changeShowValue });
</script>

<template>
    <n-modal
        closable
        :title="title"
        preset="card"
        v-model:show="show"
        style="width: 400px;"
        @after-leave="renameFormValue.name = null"
    >
        <n-form
            ref="renameFormRef"
            :model="renameFormValue"
            :rules="renameFormRules"
        >
            <n-form-item label="原始名称">
                <n-input
                    :value="originalName"
                    readonly
                />
            </n-form-item>
            <n-form-item
                label="修改名称"
                path="name"
            >
                <n-input
                    v-model:value="renameFormValue.name"
                    placeholder="请输入名称"
                />
            </n-form-item>
            <n-button
                type="success"
                block
                @click="toRename"
            >
                修改
            </n-button>
        </n-form>
    </n-modal>
</template>